<script setup>
import { onMounted, reactive } from 'vue'
import { useRouter } from 'vue-router'

import { useMapStore } from '@/stores/map'

const mapStore = useMapStore()

const props = defineProps({
  title: String,
})

const router = useRouter()

const list = reactive([
  { name: '态势总览', path: '/home', isActive: true },
  // { name: '重点场所', path: '', isActive: false },
  { name: '城乡社区', path: '/community', isActive: false },
  { name: '场所码管理', path: '/qrcode', isActive: false },
  { name: '核酸检测', path: '/naTest', isActive: false },
  // { name: '网格化管理', path: '', isActive: false },
  { name: '返乡报备', path: '/returnTown', isActive: false },
  { name: '人口信息', path: '/people', isActive: false },
  { name: '一键直查', path: '/query', isActive: false },
])

onMounted(() => {
  list.map(item => {
    if (item.path === router.currentRoute.value.path) {
      item.isActive = true
    } else {
      item.isActive = false
    }
  })
})

function toClickChildPage(e = {}) {
  const { path = '', name = '' } = e

  if (path == '') return

  router.push({ path: path })

  list.map(item => {
    if (item.name === name) {
      router.push({ path: path })
      item.isActive = true
    } else {
      item.isActive = false
    }
  })

  if (name === '态势总览') {
    //window.open("https://bpmn.honqun.com/1/");
  }
  if (name === '人口信息') {
    //window.open("https://bpmn.honqun.com/2/");
  }
  if (name === '场所码管理') {
    //window.open("https://bpmn.honqun.com/3/");
  }
}
</script>

<template>
  <div class="header">
    <div class="title">{{ title }}</div>

    <div :class="['nav', mapStore.isMapFullScreen && 'navHide']">
      <div class="navLeft">
        <div
          v-for="(item, index) in list.slice(0, 4)"
          :key="index"
          :class="{ item, clicked: item.isActive }"
          @click="toClickChildPage(item)"
          :style="item.path == '' ? 'cursor: not-allowed;' : ''"
        >
          {{ item.name }}
        </div>
      </div>

      <div class="navRight">
        <div
          v-for="(item, index) in list.slice(4)"
          :key="index"
          :class="{ item, clicked: item.isActive }"
          @click="toClickChildPage(item)"
          :style="item.path == '' ? 'cursor: not-allowed;' : ''"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.header {
  height: 93px;
  position: relative;

  .title {
    position: absolute;
    left: 50%;
    top: 23px;
    height: 50px;
    font-size: 36px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 1px;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .nav {
    position: relative;
    margin: 48px 108px 0 108px;
    height: 35px;
    transform: translateY(0);
    transition: all 0.5s linear;

    &.navHide {
      transform: translateY(-83px);
    }

    .navLeft,
    .navRight {
      position: absolute;
      top: 0;
      width: 488px;
      height: 35px;
      display: flex;
      flex-direction: row;
      align-items: center;
    }

    .navLeft {
      left: 0;
      top: 0;
      justify-content: flex-end;
    }

    .navRight {
      right: 0;
      top: 0;
      justify-content: flex-start;
    }

    .item {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 110px;
      height: 35px;
      cursor: pointer;
      font-size: 18px;
      color: #ffffff;
      background-image: url('@/assets/navbtn.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      image-rendering: -webkit-optimize-contrast;

      &:not(:first-child) {
        margin-left: 16px;
      }

      &.clicked {
        background-image: url('@/assets/navbtnactive.png');
      }
    }
  }
}
</style>
